<template>
  <div>
    <a-row>
      <a-col
        class="check-item"
        :span="8"
      >
        <a-button type="primary" @click="$router.push({path:'/actadd'})" > <a-icon type="file-add" />添加 </a-button>
        <!-- <a-button
          type="primary"
          @click="start"
          :disabled="!hasSelected"
          :loading="loading"
        > Reload </a-button> -->
        <template v-if="hasSelected">
          {{`已选项： ${selectedRowKeys.length} 个`}}
        </template>
      </a-col>
      <a-col
        :span="8"
        :offset="8"
      >
        <!-- <a-form layout="inline">
          <a-form-item>
            <a-row :gutter="12">
              <a-col :span="20">
                <a-input
                  v-decorator="[
                    'captcha',
                    {rules: [{ required: true, message: 'Please input the captcha you got!' }]}
                  ]"
                />
              </a-col>
              <a-col :span="4">
                <a-button type="primary">搜索</a-button>
              </a-col>
            </a-row>
          </a-form-item>
        </a-form> -->
      </a-col>
    </a-row>
    <br />
    <a-table
      bordered
      :dataSource="datas"
      :columns="columns"
      :loading='loading'
      :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
      :pagination='pagination'
      @change="handleTableChange"
    >
      <template
        slot="operation"
        slot-scope="text, record"
      >
        <a-button-group>
          <a-button type="primary" @click="$router.push({path:'/actadd',query:{'id':record.id}})">
            <a-icon type="edit"/>编辑</a-button>
          <a-button type="primary" @click="onView(record.id)">
            <a-icon type="copy" />预览</a-button>
          <a-button type="primary" @click="onPush(record.id)">
            <a-icon type="cloud" />发布</a-button>
          <a-button type="danger" @click="onDelete(record.id)">
            <a-icon type="delete" />删除</a-button>
        </a-button-group>
      </template>
    </a-table>
    <a-modal
      v-model="view"
      :title="'活动'+key+'预览'"
      onOk="onViewOk"
      width='90%'
    >
      <iframe class="act-view" :src="'http://www.cchzyc.com/vframe/wxact/index?id='+key" frameborder="0"></iframe>
    </a-modal>
  </div>
</template>
<script>
import { Modal } from 'ant-design-vue'
import { Message } from 'ant-design-vue'
// 表头
const columns = [
  {
    title: "活动编号",
    dataIndex: "id"
  },
  {
    title: "活动标题",
    dataIndex: "name"
  },
  {
    title: "发布者",
    dataIndex: "linkman"
  },
  {
    title: "发布时间",
    dataIndex: "time"
  },
  {
    title: "操作",
    dataIndex: "operation",
    scopedSlots: { customRender: "operation" }
  }
];
export default {
  data() {
    return {
      datas: [],
      columns,
      selectedRowKeys: [], // Check here to configure the default column
      loading: false,
      pagination:{},
      view:false,
      key:null
    };
  },
  mounted() {
    let vo = this;
    vo.pagination = {
      showSizeChanger : true,
      showQuickJumper: true,
      pageSize: 10,
      current: 1,
      onChange(current) {
        vo.pagination.current = current;
        vo.initData();
      },
      onShowSizeChange(current, pageSize){
        vo.pagination.current = current;
        vo.pagination.pageSize = pageSize;
        vo.initData();
      }
    };
    vo.initData();
  },
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0;
    }
  },
  methods: {
    onViewOk(){
      this.view = false;
    },
    onView(key){
      this.key = key;
      this.view = true;
    },
    //页码变化
    handleTableChange (pagination, filters, sorter) {
      
    },
    // 删除
    onDelete(key) {
      let vo = this;
      Modal.confirm({
        title: '确定要删除该活动吗？',
        content: '活动删除后无法恢复',
        okText: '删除',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          const dataUrl = `backstage/activityDel.do?id=${key}`;
          vo.ajax.get(dataUrl).then(res => {
            if(res == 1){//删除成功
              Message.success('删除成功');
              vo.initData();
            }else if(res==0){
              Message.error('删除失败');
            }
          });
        },
        onCancel() {
          Message.warning('取消删除');
        },
      });
      
    },
    //预览
    onViewAct(key){
      const dataSource = [...this.datas];
      this.datas = dataSource.filter(item => item.key !== key);
    },
    //发布
    onPush(key){
      let dataUrl = `http://www.cchzyc.com/vframe/wxact/index?id=${key}`;
      console.log(key);
      const h = this.$createElement
      Modal.info({
        title: '推广发布',
        content: h('div',{}, [
          h('p',``),
          h('p', `连接已发布为：${dataUrl}`)
        ]),
        onOk() {},
      });
    },
    //批量更新
    start() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        this.selectedRowKeys = [];
      }, 1000);
    },
    //批量选择
    onSelectChange(selectedRowKeys) {
      console.log("已选项: ", selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
    initData(){
      let vo = this;
      vo.loading = true;
      const dataUrl =`backstage/selActivity.do?nowPage=${vo.pagination.current}&pageSize=${vo.pagination.pageSize}`;
      vo.ajax.get(dataUrl).then(res => {
        vo.datas = res.data;
        vo.loading = false;
        vo.pagination = {
          ...vo.pagination,
          total: res.totalCount,
          showTotal: () => `共${res.totalCount}条活动`
        };
      });
      
    }
  }
};
</script>
<style>
.check-item {
  text-align: left;
}
.act-view{
  width: 100%;
  min-height: 1000px;
}
</style>
